<!-- 诉求历史记录(企业端) -->
<template>
    <div id="div">
      <el-page-header @back="goBack"></el-page-header>
        <el-button id="button1" @click="allealuserAdd">新增诉求</el-button>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column  prop="appealthemeName" label="诉求主题"  width="280">
                <template slot-scope="scope">
                  <el-link @click="toViewbyId(scope.row)" target="_blank" class="buttonText"  type="primary" :underline="false" >{{scope.row.appealthemeName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="appealcontent"
                label="诉求内容"
                width="380">
            </el-table-column>
            <el-table-column prop="completestatus" label="处理状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.completestatus== 1">待处理</span>
                <span v-if="scope.row.completestatus== 2">处理中</span>
                <span v-if="scope.row.completestatus== 3">已完结</span>
              </template>
            </el-table-column>
            <el-table-column prop="rejectid" label="是否被退回" width="120">
              <template slot-scope="scope">
                  {{ scope.row.rejectid == 2 ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
                prop="rejectcontent"
                label="退回原因"
                width="180">
            </el-table-column>
            <el-table-column
                prop="appealDate"
                label="诉求时间"
                width="180">
            </el-table-column>
            <!-- <el-table-column
                label="操作">
                <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">通过</el-button>
                <el-button @click="remove(scope.row)" type="text" size="small">驳回</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination ref="pagination"
          background
          layout="prev, pager, next"
          page-size="5"
          :total= "totalcount"
          @current-change='page'>
        </el-pagination>

    </div>
</template>

<script>

export default {
  data () {
    return {
      tableData: [],
      selectappealAllbyStatusurl: 'http://localhost:8081/appeal/selectappealAllbyStatus',
      toatalcounturl: 'http://localhost:8081/appeal/pagecount',
      currpage: '',
      userid: localStorage.getItem('userId'),
      tradeId: localStorage.getItem('tradeId'),
      totalcount: '',
    
    }
  },
  methods: {
    // 点击内容跳转至详情
    toViewbyId (row) {
      this.$router.push({
        path: '/completeUserAdd',
        query: {
          appealid: row.appealreportingId
        }
      })
    },
    // 返回上一层
    goBack () {
      console.log('go back')
      this.$router.go(-1)
    },

    // 跳转诉求添加页面
    allealuserAdd () {
          this.$router.push('/appealreportingUserAdd')
    },
    
    page(currpage){
        this.selectAllappeal(currpage)
    },

    // 每页查询5条数据，按时间排序
    selectAllappeal (currpage) {
    axios.get(this.selectappealAllbyStatusurl + '/0/0/' + this.userid + '/' + this.tradeId + '/' + currpage).then(
      res => {
        console.log(res.data)
        this.tableData = res.data
      }
    ).catch(
      err => {
        console.log(err)
      }
    )
    },

    gettotalcount(){
    axios.get(this.toatalcounturl+ '/0/' + this.userid + '/' + this.tradeId).then(
      res=>{
           console.log(res.data)
           this.totalcount = res.data;
        }
        ).catch(
            err=>{
                console.log(err);
            }
        )
    },
  },

  mounted(){
    this.selectAllappeal(1)
    this.gettotalcount()
  }
}
</script>

<style scoped>

#button1{
  margin-top: 20px;
  position: relative;
  left: 1000px;
  background-color: blue;
  color: white;
  font-size: 16px;
  font-weight: bolder;
}

#div{
  margin-top: 20px;
  margin-left: 50px;
}
.el-pagination{
  text-align: center;
}
</style>
